<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind实现简易的轮播图</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        v-bind:src   -> :src
-->
<div id="app">
    <img :src="img" >
    <hr>
    <button @click="pre">上一张</button>
    <button @click="next">下一张</button>
</div>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            img:'../imgs/1.png',
            imgs:[
                "../imgs/1.png","../imgs/2.png","../imgs/3.png"
            ],
            index:0
        },
        methods:{
            pre(){
                this.index--
                if (this.index < 0){
                    this.index = this.imgs.length-1
                }

                this.img = this.imgs[this.index]
            },
            next(){
                this.index++
                if (this.index > this.imgs.length-1){
                    this.index=0
                }

                this.img = this.imgs[this.index]

            }
        }
    })
</script>
</body>
</html>
